<template>
  <el-dialog :model-value="dialogVisible" title="模板库" :destroy-on-close="true" @close="closeDialog">
    <div class="page-card h-full" v-loading="loading">
      <JqTable :tableColumn="tableColumn" :data="tableData" :page="page" :tableButtons="[]" :itemsButtons="itemsButtons"
        :isTopHeader="false" @handleSizeChange="handleSizeChange" @handleCurrentChange="handleCurrentChange">
        <!-- <el-radio v-model="radio" disabled value="disabled">Option A</el-radio> -->
        <template #radio>
          <el-table-column show-overflow-tooltip :width="60" prop="radio" label="" fit="true" show-header="true"
            align="left">
            <template #default="scope">
              <div style="display: flex; align-items: center">
                <el-radio v-model="radio" :value="scope.row.id"></el-radio>
              </div>
            </template>
          </el-table-column>
        </template>
      </JqTable>
    </div>
  </el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive } from 'vue';
import {
  replyPhrasePage,
} from '@/api/automatic/index'
import { JqTable } from '@/components/Table/index';
import { useTable } from '@/hooks/useTable';
const emits = defineEmits(['choose'])
const props = defineProps({
  dialogVisible: {
    type: Boolean,
    default: false
  },
});
const radio = ref(null)
// table列表字段
const tableColumn = ref([
  { label: '模板ID', prop: 'id', width: '80' },
  { label: '模版内容', prop: 'msgContent' },
]);
const itemsButtons = reactive([
  {
    id: 45,
    type: 'primary',
    label: '选择',
    perms: 'automatic:models:btn:edit',
    onClick: (row: Row) => {
      emits('choose', row)
    }
  }
])
let searchFormParams = reactive({});
const { tableData, page, loading, resetParams, getList, handleCurrentChange, handleSizeChange } =
  useTable({
    apiFn: replyPhrasePage,
    params: () => searchFormParams
  });

const closeDialog = () => {
  emits('choose')
}
</script>
<style lang="scss" scoped>
.el-dialog__footer {
  text-align: center;
}

.avatar-uploader-icon {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-style: normal;
}
</style>
